<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css"></style>
</head>

<body>
    <table border="1" width="400" align="center" style="border-collapse: collapse" id="table">
        <tr>
            <th>序号</th>
            <th>标题</th>
            <th>发布时间</th>
            <th>删除</th>
        </tr>
        <tr>
            <td>1</td>
            <td>武汉传智PHP要开班了</td>
            <td>2016-3-20</td>
            <td><input type="checkbox" name="id" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>佛山传智PHP要开班了</td>
            <td>2018-3-20</td>
            <td><input type="checkbox" name="id" /></td>
        </tr>
        <tr>
            <td>3</td>
            <td>纽约传智PHP要开班了</td>
            <td>2018-3-20</td>
            <td><input type="checkbox" name="id" /></td>
        </tr>
        <tr>
            <td>4</td>
            <td>伦敦传智PHP要开班了</td>
            <td>2018-3-20</td>
            <td><input type="checkbox" name="id" /></td>
        </tr>
        <tr>
            <td colspan="4" align="right">
                <input type="button" value="全选" id="quanxuan" />
                <input type="button" value="取消" id="quxiao" />
                <input type="button" value="反选" id="fanxuan" />
                <input type="button" value="删除" id="del" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        // 1获取所有的复选框
        var check = document.querySelectorAll('input[name="id"]');
        // 2.获取所有的按钮
        var quanxuan = document.querySelector("#quanxuan");
        var quxiao = document.querySelector("#quxiao");
        var fanxuan = document.querySelector("#fanxuan");
        var del = document.querySelector("#del");
        // 3. 给按钮注册点击事件
        quanxuan.onclick = function() {
            // 需要将所有的复选框打勾
            for (var i = 0; i < check.length; i++) {
                check[i].checked = true;
            }
        };

        quxiao.onclick = function() {
            // 需要将所有的复选框不打勾
            for (var i = 0; i < check.length; i++) {
                check[i].checked = false;
            }
        };

        fanxuan.onclick = function() {
            // 需要将所有的复选框不打勾
            for (var i = 0; i < check.length; i++) {
                // 只需要判断当前的复选框是否打勾了
                check[i].checked = !check[i].checked;
            }
        };

        del.onclick = function() {
            // 需要将选中的元素删除
            // 点击删除按钮时 需要确定哪些元素已经被选中了
            var checked = document.querySelectorAll('input[name="id"]:checked');
            for (var i = 0; i < checked.length; i++) {
                checked[i].parentNode.parentNode.remove();
            }
        };
    </script>
</body>

</html>